<template>
  <div class="achievement" v-cloak  v-show="show">
    <div class="bg_color"></div>
    <div class="topv border-s" v-transfer-dom>
      <div class="returna_left" @click="returnback">
        <img src="../assets/image/backBa.png" alt="">
      </div>
      <div class="returna_right" @click="shareBtn">
        <img src="../assets/image/btn_share.png" alt="">
      </div>
      <p>{{name}}</p>
    </div>
    <div class="about-us">
      <div class="bg_color"></div>
      <div class="tv_img">
        <img :src="service_info.se_image" alt="">
      </div>
      <div class="tv_title">
        <p>{{service_info.se_name}}</p>
        <p class="tv_pll">
          <span class="noVip">非会员价：<span class="col_p">{{service_info.se_price}}</span>元<i></i></span>
          <span class="yesVip">会员价：<span class="col_p">{{service_info.se_member_price}}</span>元</span>
        </p>
      </div>
      <div class="tv_pl" @click="servicestaclick">
        <div class="expres_ti">
                <span class="fl_right1 btn_bo" v-if="servicesta">
                  <img src="../assets/image/fuxq_btn_04.png" alt="">
                </span>
          <span class="fl_right1 btn_bo" v-if="!servicesta">
                  <img src="../assets/image/fuxq_btn_04_u.png" alt="">
                </span>
          <p class="expr_jtv">
                    <span class="">
                     <img src="../assets/image/fuxq_icon_01.png" alt="">
                 </span> 服务内容
          </p>
        </div>
        <div class="service_contents" v-if="!servicesta" v-html="service_info.se_content"></div>
      </div>
      <div class="tv_pl" @click="ifNote">
        <div class="expres_ti">
                <span class="fl_right1 btn_bo" v-if="ifNotesta">
                  <img src="../assets/image/fuxq_btn_04.png" alt="">
                </span>
          <span class="fl_right1 btn_bo" v-if="!ifNotesta">
                  <img src="../assets/image/fuxq_btn_04_u.png" alt="">
                </span>
          <p class="expr_jtv">
                    <span class="">
                     <img src="../assets/image/fuxq_icon_02.png" alt="">
                 </span> 预约须知
          </p>
        </div>
        <div class="service_contents" v-if="!ifNotesta" v-html="service_info.se_notes"></div>
      </div>
      <div class="tv_pl">
        <div class="expres_ti" style="border: 0px;" @click="isaddress">
                <span class="fl_right1 btn_bo" v-if="isaddresssta">
                  <img src="../assets/image/fuxq_btn_04.png" alt="">
               </span>
          <span class="fl_right1 btn_bo" v-if="!isaddresssta">
                 <img src="../assets/image/fuxq_btn_04_u.png" alt="">
              </span>
          <p class="expr_jtv">
                    <span class="">
                     <img src="../assets/image/fuxq_icon_03.png" alt="">
                 </span> {{info.user_address}}
          </p>
        </div>
        <div v-if="!isaddresssta">
          <div v-if="!result.member_status">
            <div v-if="address_list.length != 0">
              <div class="address_l2" v-for="(item,index) in address_list" @click="address_click(index,item.ua_address_detail,item.ua_address,item.ua_name,item.ua_mobile)" :class="{address_bg : curr_index == index}">
                <p>
                  <span class="fl_right1">{{item.ua_mobile}}</span> {{item.ua_name}}
                </p>
                <p>
                  {{item.ua_address_detail}}
                </p>
              </div>
              <div class="btn_u" @click="manageAddress">管理地址</div>
            </div>
            <div v-else>
              <div class="addass">
                暂无地址，<span class="" @click="addAddress">马上添加 </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tv_pl" @click="serviceTime">
        <div class="expres_ti">
                <span class="fl_right1 btn_ri">
                 <img src="../assets/image/fuxq_btn_05.png" alt="">
             </span>
          <p class="expr_jtv">
                    <span class="">
                     <img src="../assets/image/fuxq_icon_04.png" alt="">
                 </span> {{service_date}}
          </p>
        </div>
      </div>
      <div class="tv_pl" @click="demand">
        <div class="expres_ti">
                <span class="fl_right1 btn_ri">
                 <img src="../assets/image/fuxq_btn_05.png" alt="">
             </span>
          <p class="expr_jtv">
                    <span class="">
                     <img src="../assets/image/fuxq_icon_05.png" alt="">
                 </span> {{remark}}
          </p>
        </div>
      </div>
      <div class="tv_pl" v-if="result.coupon_id != 0">
        <group>
          <x-switch :title="title" v-model="couponsta" @on-change="modelcou"></x-switch>
        </group>
      </div>
      <div class="fuwu">
        <p>
        <p class="fu_kl">
                    <span class="btn_kl" @click="submit">接受服务<span class="size_map">(实付：<span v-if="result.member_status">{{service_info.se_member_price}}</span><span v-else>{{service_info.se_price}}</span>)</span>
                    </span>
          <span class="cancel_span1" style="margin-top: 8px;">
                        <input type="checkbox" name="cause" v-model="accept">
                     </span>
        </p>
        <span class="sho_p">
             接受<span class="colo_red" @click="terms">《服务条款》</span>
                </span>
        </p>
      </div>
      <div class="delFix" @click="hideFix" v-if="isDel">
        <div class="fixBox">
          <p>确定要购买此服务吗？</p>
          <div class="cancel btn" @click.stop="hideFix" style="line-height:22px;float: left;margin-left: 20px;">取消</div>
          <div class="confirm btn" @click.stop="submitDetail" style="line-height:22px;">确定</div>
        </div>
      </div>
      <div class="zhezhao" v-show="shareSta" @click="zheZ">
        <img src="../assets/img/jiantou.png"/>
        <p class="wordZz">请点击右上角分享 <img src="../assets/img/share.png" class="wordImg"> 按钮，分享给好友吧！</p>
      </div>
    </div>
  </div>
</template>
<script>
  import { XSwitch, Group, Cell, TransferDom } from 'vux'
  import base64 from 'vux/src/tools/base64/index.js'
  export default {
    components: {
      XSwitch,
      Group,
      Cell
    },
    directives: {
      TransferDom
    },
    name: 'addJoin',
    data () {
      return {
        name: '',
        title: '我的卡券',
        couponsta: true,
        isDel: false,
        demandclick: false,
        values: false,
        show: false,
        result: {},
        address: {},
        service_info: {},
        service_notes: '',
        show_content: false,
        show_note: false,
        servicesta: true,
        ifNotesta: true,
        isaddresssta: true,
        address_list: [],
        curr_index: -2,
        info: {
          service_id: '',
          user_address: '选择地址',
          user_address_detail: '',
          service_date: '',
          service_time: '',
          remark: '',
          coupon_id: 0,
          pay_type: '微信',
          user_mobile: '',
          user_name: '',
          source: 'JSAPI'
        },
        remark: '备注需求',
        iscard: true,
        stv: true,
        service_date: '服务时间',
        accept: true,
        show_share_head: false,
        share_url: '',
        title_share: '',
        text_share: '',
        img_share: '',
        buttontype: true,
        cl_id: '',
        servicenot: '',
        shareSta: false
      }
    },
    methods: {
      returnback: function () {
        window.history.go(-1)
      },
      zheZ: function () {
        this.shareSta = false
      },
      shareBtn: function () {
        this.shareSta = true
      },
      shareweixin: function (callback) {
        let thisObj = this
        thisObj.$chaos.ajax({
          data: {},
          slient: true,
          userinfo: false,
          url: 'Index/getShareConfig',
          callback: function (type, res) {
            if (res.status === 'SUCCESS') {
              callback()
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      modelcou (value) {
        if (!value) {
          this.info.coupon_id = 0
        }
        console.log(this.info.coupon_id)
      },
      hideFix: function () {
        this.isDel = false
      },
      payselect: function (name) {
        this.info.pay_type = name
      },
      submitDetail: function () {
        let thisObj = this
//        thisObj.info.service_date = thisObj.service_date
        if (thisObj.info.coupon_id !== 0) {
          thisObj.info.pay_type = ''
        }
        thisObj.option(thisObj.info)
      },
      address_click: function (index, detail, naaddress, name, mobile) {
        this.curr_index = index
        this.info.user_address = detail
        this.info.user_address_detail = naaddress
        this.info.user_name = name
        this.info.user_mobile = mobile
        this.isaddresssta = true
        this.setmode('currindex', index)
        this.setmode('user_address', detail)
        this.setmode('user_address_detail', naaddress)
        this.setmode('user_name', name)
        this.setmode('user_mobile', mobile)
      },
      manageAddress: function () {
//        window.location.replace('#/ManageAddress')
        window.location.href = '#/ManageAddress'
      },
      setmode: function (name, content) {
        let mode = this.$chaos.config('mode')
        if (mode === 'website') {
          sessionStorage[name] = JSON.stringify(content)
        } else {
          localStorage[name] = JSON.stringify(content)
        }
      },
      getmode: function (content) {
        let mode = this.$chaos.config('mode')
        if (mode === 'website' && sessionStorage[content]) {
          return JSON.parse(sessionStorage[content])
        } else if (mode === 'client' && localStorage[content]) {
          let content = JSON.parse(localStorage[content])
          if (content.expire_time * 1000 < new Date().getTime()) {
            localStorage[content] = null
            return false
          }
          return content
        } else {
          return false
        }
      },
      terms: function () {
        this.setmode('content', this.servicenot)
//        window.location.replace('#/Terms')
        window.location.href = '#/Terms'
      },
      addAddress: function () {
        window.location.href = '#/Address?member=' + 'no'
      },
      demand: function () {
//        window.location.replace('#/Demand')
        window.location.href = '#/Demand'
      },
      option: function (data, callback) {
        var thisObj = this
        thisObj.$vux.loading.show({
          text: '加载中'
        })
        thisObj.$chaos.ajax({
          data: data,
          slient: true,
          userinfo: true,
          url: 'Service/buyService',
          callback: function (type, res) {
            if (res.status === 'SUCCESS') {
              thisObj.$vux.loading.hide()
              thisObj.isDel = false
              if (thisObj.result.member_status || thisObj.info.coupon_id !== 0) {
                thisObj.$vux.toast.show({
                  text: '恭喜您下单成功',
                  type: 'text',
                  width: '180px',
                  position: 'bottom'
                })
                setTimeout(function () {
                  window.location.href = '#/Dispatch'
                }, 600)
                return false
              } else {
                WeixinJSBridge.invoke(
                  'getBrandWCPayRequest', {
                    'appId': res.result.wxpay_data.appid,
                    'timeStamp': '' + res.result.wxpay_data.timestamp,
                    'nonceStr': res.result.wxpay_data.noncestr,
                    'package': 'prepay_id=' + res.result.wxpay_data.prepayid,
                    'signType': 'MD5',
                    'paySign': res.result.wxpay_data.sign
                  },
                  function (res) {
                    if (res.err_msg === 'get_brand_wcpay_request:ok') {
                      thisObj.$vux.toast.show({
                        text: '恭喜您下单成功',
                        type: 'text',
                        width: '180px',
                        position: 'bottom'
                      })
                      setTimeout(function () {
                        window.location.href = '#/Dispatch'
                      }, 600)
                    }
                  }
                )
              }
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      submit: function () {
        var thisObj = this
        if (thisObj.info.user_address === '选择地址') {
          thisObj.$vux.toast.show({
            text: '请选择地址',
            type: 'text',
            width: '180px',
            position: 'bottom'
          })
          return false
        }
        if (thisObj.info.service_date === '') {
          thisObj.$vux.toast.show({
            text: '请选择服务时间',
            type: 'text',
            width: '180px',
            position: 'bottom'
          })
          return false
        }
        if (!thisObj.accept) {
          thisObj.$vux.toast.show({
            text: '请先阅读接受服务条款',
            type: 'text',
            width: '180px',
            position: 'bottom'
          })
          return false
        }
        thisObj.isDel = true
      },
      servicestaclick: function () {
        var thisObj = this
        if (thisObj.servicesta) {
          thisObj.servicesta = false
        } else {
          thisObj.servicesta = true
        }
      },
      ifNote: function () {
        if (this.ifNotesta) {
          this.ifNotesta = false
        } else {
          this.ifNotesta = true
        }
      },
      isaddress: function () {
        if (this.result.member_status) {
          if (this.info.user_name === '') {
            window.location.href = '#/Address?member=' + 'member'
          }
          return false
        }
        if (this.isaddresssta) {
          this.isaddresssta = false
        } else {
          this.isaddresssta = true
        }
      },
      serviceTime: function () {
//        window.location.replace('#/ServiceTime')
        window.location.href = '#/ServiceTime'
      },
      getShare: function (callback) {
        let thisObj = this
        thisObj.$chaos.ajax({
          data: {
            se_id: thisObj.info.service_id
          },
          slient: true,
          userinfo: true,
          url: 'Service/serviceShare',
          callback: function (type, res) {
            if (res.status === 'SUCCESS') {
              thisObj.img_share = res.result.share_image
              thisObj.text_share = res.result.share_content
              thisObj.title_share = res.result.share_content
              thisObj.share_url = res.result.share_url
              callback()
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      getShareConfig: function (callback) {
        let thisObj = this
        thisObj.$chaos.ajax({
          data: {
            url: location.href.split('#')[0]
          },
          slient: true,
          userinfo: false,
          url: 'Index/getShareConfig',
          callback: function (type, res) {
            if (res.status === 'SUCCESS') {
              thisObj.$wechat.config(res.result.config)
              callback()
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      verify: function () {
        let thisObj = this
        thisObj.name = decodeURI(this.$chaos.getQueryString('name'))
        this.$chaos.setTitle(thisObj.name)
        this.$store.commit('headerShow', false)
        this.$store.commit('footerShow', false)
        thisObj.cl_id = this.$chaos.getQueryString('cl_id')
        thisObj.setmode('manger', 'one')
        thisObj.info.openid = this.$chaos.getOpenId()
        this.$chaos.verify(function () {
          thisObj.$chaos.ajax({
            data: {
              classify_id: thisObj.cl_id
            },
            slient: true,
            userinfo: true,
            url: 'Service/getServiceInfo',
            callback: function (type, ret) {
              if (ret.status === 'SUCCESS') {
                thisObj.show = true
                thisObj.result = ret.result
                thisObj.address = ret.result.address
                thisObj.address_list = ret.result.address_list
                thisObj.service_info = ret.result.service_info
                thisObj.service_info.se_notes = thisObj.service_info.se_notes.replace(/\n/g, '<br/>')
                thisObj.service_info.se_content = thisObj.service_info.se_content.replace(/\n/g, '<br/>')
                thisObj.info.service_id = ret.result.service_info.se_id
                thisObj.getShareConfig(function () {
                  thisObj.getShare(function () {
                    thisObj.$wechat.onMenuShareAppMessage({
                      title: thisObj.title_share, // 分享标题
                      desc: thisObj.text_share, // 分享描述
                      link: thisObj.$chaos.config('callbackUrl') + '?callback=' + base64.encode(location.href.split('#')[0] + '#/ServiceHome'), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                      imgUrl: thisObj.img_share, // 分享图标
                      type: '', // 分享类型,music、video或link，不填默认为link
                      dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                      success: function () {
                        thisObj.shareSta = false
                        // 用户确认分享后执行的回调函数
                      },
                      cancel: function () {
                        // 用户取消分享后执行的回调函数
                      }
                    })
                    thisObj.$wechat.onMenuShareTimeline({
                      title: thisObj.title_share, // 分享标题
                      link: thisObj.$chaos.config('callbackUrl') + '?callback=' + base64.encode(location.href.split('#')[0] + '#/ServiceHome'), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                      imgUrl: thisObj.img_share, // 分享图标
                      success: function () {
                        thisObj.shareSta = false
                        // 用户确认分享后执行的回调函数
                      },
                      cancel: function () {
                        // 用户取消分享后执行的回调函数
                      }
                    })
                  })
                })
                thisObj.servicenot = ret.result.service_notes
                thisObj.info.coupon_id = ret.result.coupon_id
                if (thisObj.result.member_status) {
                  if (ret.result.address == null) {

                  } else {
                    thisObj.info.user_name = ret.result.address.name
                    thisObj.info.user_mobile = ret.result.address.mobile
                    thisObj.info.user_address = ret.result.address.address
                    thisObj.info.user_address_detail = ret.result.address.address_detail
                  }
                }
              } else {
                thisObj.$vux.toast.show({
                  text: ret.result.msg,
                  type: 'text',
                  width: '180px',
                  position: 'bottom'
                })
              }
            }
          })
        })
      }
    },
    created: function () {
//      this.setmode('usprovince', '')
//      this.setmode('uscity', '')
//      this.setmode('uscounty', '')
//      this.setmode('addressname', '')
//      this.setmode('addressmobile', '')
      if (this.getmode('service') === 'one') {
        this.setmode('demand', '')
        this.setmode('datemsg', '')
        this.setmode('timemsg', '')
        this.setmode('curr_index', '')
        this.setmode('user_address', '')
        this.setmode('user_address_detail', '')
        this.setmode('user_mobile', '')
        this.setmode('user_name', '')
        this.setmode('deletemanger', '')
      } else {
        if (this.getmode('currindex') !== 'one') {
          this.curr_index = this.getmode('currindex')
          this.info.user_address = this.getmode('user_address')
          this.info.user_address_detail = this.getmode('user_address_detail')
          this.info.user_name = this.getmode('user_name')
          this.info.user_mobile = this.getmode('user_mobile')
          this.isaddresssta = true
          if (this.getmode('deletemanger') === 'delete') {
            this.info.user_address = ''
            this.info.user_address_detail = ''
            this.info.user_name = ''
            this.info.user_mobile = ''
          }
        }
        if (this.getmode('demand')) {
          this.info.remark = this.getmode('demand')
          this.remark = this.getmode('demand')
        }
        if (this.getmode('datemsg')) {
          this.service_date = this.getmode('datemsg') + ' ' + this.getmode('timemsg')
          this.info.service_date = this.getmode('datemsg')
          this.info.service_time = this.getmode('timemsg')
        }
      }
      this.verify()
      if (this.getmode('need-refresh')) {
        window.location.reload()
        this.setmode('need-refresh', false)
      }
    },
    mounted: function () {
      window.scrollTo(0, 2000)
    },
    destroyed: function () {
//      this.setmode('seion', false)
    },
    watch: {
      '$route': 'verify'
    }
  }
</script>
<style lang="less">
  @import '~vux/src/styles/reset.less';
  @switch-height: 22px;
  .vux-x-switch.weui-cell_switch{
    padding-top: 10px!important;
    padding-bottom: 10px!important;
  }
  .returna_left{
    float: left;
    line-height: 46px;
    width: 40px;
    text-align: center;
  }
  .returna_left img{
    width: 10px;
    height: 18px;
    margin-top:4px;
    position: absolute;
    left:15px;
    top:10px;
  }
  .wordZz{
    color: #fff;
    margin-top: 25px;
    font-size: 16px;
  }
  .wordZz img{
    width: 11%!important;
  }
  .zhezhao > img{
    width: 165px;
    height: 220px;
  }
  .zhezhao{
    position: fixed;
    top:0;
    left: 0;
    right:0;
    bottom:0;
    background: rgba(0,0,0,0.5);
    text-align: center;
    padding-top:60px;
    z-index: 999999;
  }
  .wordZz *{
    vertical-align: middle;
  }
  .border-s{
    border-bottom: 1px solid #efefef;
  }
  .returna_right img{
    width: 18px;
    height: 18px;
    margin-left: 10px;
    margin-top:4px;
  }
  .returna_right{
    float: right;
    line-height: 46px;
    width: 62px;
    text-align: center;
    position: absolute;
    right:0px;
    top:5px;
  }
  .topv{
    width:100%;
    height:46px;
    left:0;
    top:0;
    background: #fff;
    position: fixed;
  }
  .topv p {
    margin: 0 100px;
    text-align: center;
    line-height: 46px;
    font-size: 16px;
  }
  .weui-switch{
    width: 42px!important;
    height:22px!important;
  }
  .weui-switch:before, .weui-switch-cp__box:before{
    width: 40px!important;
    height: 20px!important;
  }
  .weui-switch:after, .weui-switch-cp__box:after{
    width:20px!important;
    height:20px!important;
  }
  [v-cloak] {
    display: block;
  }
  .tv_img img{
    width:100%;
    height:180px;
  }
  .cancel_span1{
    display: block;
    float: left;
    width: 17px;
    height: 17px;
    margin: 2px 8px 0px 15px;
  }
  .cancel_span1 input[type="checkbox"],.cancel_span2 input[type="radio"]{
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    width: 17px;
    height: 17px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #aeaeae;
  }
  .cancel_span1 input[type="checkbox"]:checked , .cancel_span2 input[type="radio"]:checked{
    background: url("../assets/image/fuxq_btn_02.png");
    background-size: 100% 100%;
    width:17px;
    height:17px;
    border:0px;
  }
  .cancel_span2 {
    padding-right: 15px;
    margin-top: 14px;
  }

  .addass {
    text-align: center;
    padding: 15px 0px;
  }

  .addass span {
    color: #ffa128
  }
  .btn_kl {
    background: #ffa128;
    float: right;
    display: block;
    padding: 5px 10px;
    color: #fff;
    border-radius: 5px;
  }
  .address_bg {
    background: #ffa128;
    color: #fff;
  }
  .size_map {
    margin-top: 0px!important;
    margin-bottom: 0px!important;
  }
  .size_map {
    font-size: 12px;
  }
  span {
    display: inline-block;
  }
  .sho_p {
    margin-top: 6px;
    display: inline-block;
  }
  .colo_red {
    color: #ff2c2c;
  }
  .expr_jtv {
    float: left;
    font-size: 15px;
    margin-top: 1px;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tv_pll {
    /*width: 100%*/
  }
  .size_map {
    margin-top: 0px!important;
    margin-bottom: 0px!important;
  }
  .service_contents{
    padding: 10px 20px;
  }
  .tv_img{
    width:100%;
    height:180px;
  }
  .tv_title{
    background: #fff;
    padding: 10px 15px;
    margin-bottom: 4px;
  }
  .tv_title p{
    line-height: 24px;
  }
  .noVip{
    color: #fff;
    display: inline-block;
    line-height: 30px;
    background: rgb(255,161,40);
    position: relative;
    text-indent: 5px;
  }
  .noVip > i{
    background: url("../assets/image/triangle.png");
    background-size: 100% 100%;
    position: absolute;
    width: 20px;
    height: 30px;
    right: -20px;
  }
  .yesVip{
    color: #333;
    display: inline-block;
    margin-left: 15px;
  }
  .col_p{
    font-size: 16px;
    display: inline-block;
  }
  .expres_ti{
    padding: 10px 15px;
    overflow: hidden;
    /*border-bottom: 1px solid #cacaca;*/
  }
  .cancel_span2{
    margin-top: 14px;
    margin-left:15px;
    padding-right:0px;
  }
  .fl_right1{
    float: right;
  }
  .expr_jtv span img{
    width: 100%;
    height: 100%;
    margin-top: 2px;
  }
  .service_content{
    padding: 10px 20px
  }
  .tv_pl{
    background: #fff;
    overflow: hidden;
    /*margin-bottom: 4px;*/
  }
  .expr_jtv{
    float: left;
    font-size: 15px;
    margin-top: 1px;

  }
  .expr_jtv span {
    width: 19px;
    height: 19px;
    display: block;
    border-radius: 50%;
    text-align: center;
    line-height: 26px;
    color: #fff;
    font-size: 15px;
    float: left;
    margin-right: 11px;
  }
  .btn_bo{
    width: 20px;
    /*margin-top: 3px;*/
  }
  .btn_ri{
    /*padding-top: 3px;*/
  }
  .order_ul{
    background: #fff;
    overflow: hidden;
  }
  .order_ul li{
    overflow: hidden;
    border-bottom: 1px solid #f9f9f9;
  }
  .order_sp3{
    width: 25px;
    height: 22px;
    display: block;
    float: left;
    margin-right: 10px;
    vertical-align: -8px;
    margin-top:2px;
  }
  .order_sp3 img{
    width:100%;
    height:100%;
  }
  .cancel_span2 input[type="radio"]{
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    width: 17px;
    height: 17px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #aeaeae;
  }
  .cancel_span2 input[type="radio"]:checked{
    background: url("../assets/image/btn_xz_s.png");
    background-size: 100% 100%;
    width:17px;
    height:17px;
    border:0px;
  }
  .order{
    background: #fff;
    padding: 11px 15px;
    overflow: hidden;
  }
  .fl_right{
    float: left;
  }
  .fuwu{
    background: #fff;
    padding: 9px 15px 9px 0px;
    margin-top: 4px;
    overflow: hidden;
  }
  .btn_kl{
    background: #ffa128;
    float: right;
    display: block;
    padding: 5px 10px;
    color: #fff;
    border-radius:5px;
  }
  .address_l2{
    background: #f9f9f9;
    margin:10px;
    overflow: hidden;
    padding: 7px 15px;
    line-height: 22px;
    border-radius: 5px 5px;
  }
  .tv_pll{
    /*background: url("../images/bg_yi.png");*/
    border: 1px solid rgb(255,161,40);
    width:80%;
    background-size: 100% 100%;
    margin:5px 0px;
  }
  .btn_u{
    margin: 11px auto;
    padding: 3px 8px;
    background: #ffa128;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    width: 60px;
  }
  .sho_p{
    margin-top: 6px;
    display: inline-block;
  }
  .btn_bo img{
    width:16px;
  }
  .btn_ri{
    padding-top: 2px;
    margin-right: 8px;
  }
  .btn_ri img{
    width: 9px;
  }
  .address_bg {
    background: #ffa128;
    color: #fff;
  }
  .delFix {
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0,0,0,0.3);
    left: 0;
    top: 0;
    z-index: 1;
  }
  .delFix .fixBox {
    width: 200px;
    height: 70px;
    margin: 250px auto 0;
    background: #fff;
    border-radius: 10px;
    position: relative;
    padding: 30px 0 15px;
  }
  .delFix .fixBox > p {
    text-align: center;
    height: 20px;
    line-height: 20px;
    margin-bottom: 20px;
  }
  delFix .fixBox .cancel {
    float: left;
    margin-left: 23px;
    color: rgb(255,160,40);
  }
  .delFix .fixBox .btn {
    width: 65px;
    height: 25px;
    border: 1px solid rgb(255,160,40);
    border-radius: 5px;
    text-align: center;
  }
  .delFix .fixBox .confirm {
    float: right;
    margin-right: 23px;
    color: #fff;
    background: rgb(255,160,40);
  }
  .delFix .fixBox .btn {
    width: 65px;
    height: 25px;
    border: 1px solid rgb(255,160,40);
    border-radius: 5px;
    text-align: center;
  }
</style>
